<template>
<!-- 今日实时数据 -->
<el-row :gutter="40" class="panel-group">
  <el-button class="marginB20 marginL10" type="success" size="medium" icon="el-icon-refresh" @click="refresh">更新汇总数据</el-button>
  <div class="flexWrapStartDetween">
    <!-- 今日新增 -->
    <el-col :xs="24" :sm="12" :md="8" class="card-panel-col">
      <div class="card-panel">
        <p class="card_title">今日新增<span class="marginL10 colorGre"> {{ formParams.newProbability }}%</span></p>
        <div class="marginT20 marginB20" style="text-align:right">
          <span class="text-value" >{{ formParams.today_create_person }} </span>人
        </div>
        <p class="card_content flexEvenly">
          <span>充值: {{ formParams.today_first_pay_person }} 人</span>
          <span>代理: {{ formParams.today_agent_create_person }}人</span>
        </p>
        <el-popover placement="top-end" title="今日新增" width="300" trigger="hover">
          <img slot="reference" class="query" src="@/assets/img/query.png" alt="">
          <p>今日新增: 今日注册玩家</p>
          <p>今日新增%: 今日新增玩家 / 昨日新增玩家</p>
          <p>首充: 今日第一次充值的账号数</p>
          <p>今日新增: 今日第一次新增第1位成为代理的账号数</p>
        </el-popover>
      </div>
    </el-col>
    <!-- 总人数 -->
    <el-col :xs="24" :sm="12" :md="8" class="card-panel-col">
      <div class="card-panel">
        <p class="card_title">总人数<span class="marginL10 colorGre"> {{ formParams.newMember }}%</span></p>
        <div class="marginT20 marginB20" style="text-align:right">
          <span class="text-value">{{ formParams.all_create_person }}</span>人
        </div>
        <p class="card_content flexAround">
          <span>活跃人数: {{ formParams.today_active_num }}人</span>
          <span>VIP人数: {{formParams.all_vip_num}}人</span>
        </p>
        <el-popover placement="top-end" title="总人数" width="300" trigger="hover">
          <img slot="reference" class="query" src="@/assets/img/query.png" alt="">
          <p>总人数: 今日为止游戏里玩家总数</p>
          <p>总人数%: 今日新增玩家总数 / 昨日玩家总数</p>
          <p>活跃人数: 今日在线的玩家,即为活跃玩家</p>
          <p>VIP人数: 今日为止充值VIP的玩家</p>
        </el-popover>
      </div>
    </el-col>
    <!-- 充提差额 -->
    <el-col :xs="24" :sm="12" :md="8" class="card-panel-col">
      <div class="card-panel">
        <p class="card_title">充提差额<span class="marginL10" :class="formParams.income>0?'colorGre':'colorRed'"> {{ formParams.income }}%</span></p>
        <div class="marginT20 marginB20" style="text-align:right">
          <span :class="formParams.today_income>0?'colorGre':'colorRed'" >
            ₹<span class="text-value">{{ formParams.today_income }}</span>
          </span>
        </div>
        <p class="card_content flexAround">
          <span>今日首充: ₹{{ formParams.today_pay_money }}({{ formParams.today_pay_person }}人)</span>
          <span>今日提现: ₹{{formParams.today_cash_money}}({{formParams.today_cash_person}} 人)</span>
        </p>
        <el-popover placement="top-end" title="充提差额" width="300" trigger="hover">
          <img slot="reference" class="query" src="@/assets/img/query.png" alt="">
          <p>充提差额: 今日充值金额-今日提现金额</p>
          <p>充提差额%: 充提差额 / 今日充值金额</p>
          <p>今日充值: 今日充值成功的总金额(今日充值不重复人数)</p>
          <p>今日提现: 今日提现成功的总金额(今日提现不重复人数)</p>
        </el-popover>
      </div>
    </el-col>
    <!-- 今日输赢 -->
    <el-col :xs="24" :sm="12" :md="8" class="card-panel-col">
      <div class="card-panel">
        <p class="card_title">今日输赢<span class="marginL10" :class="formParams.newIncome>0?'colorGre':'colorRed'"> {{ formParams.newIncome }}%</span></p>
        <div style="text-align:right">
          <span :class="formParams.today_game_income>0?'colorGre':'colorRed'" >
            ₹<span class="text-value">{{ formParams.today_game_income }}</span>
          </span>
        </div>
        <div class="card_content flexAround">
          <span>玩家剩余总卢比: ₹{{formParams.all_balance}}</span>
          <span>可提现卢比: ₹{{formParams.can_cash_money}}</span>
        </div>
        <el-popover placement="top-end" title="今日输赢" width="300" trigger="hover">
          <img slot="reference" class="query" src="@/assets/img/query.png" alt="">
          <p>今日输赢: 系统输赢金额</p>
          <p>今日输赢%: 今日输赢金额 / 昨日输赢金额</p>
          <p>玩家剩余总卢比: 今日玩家身上剩余可提现+不可提现卢比</p>
          <p>可提现卢比: 今日玩家身上可提现卢比总数提现</p>
        </el-popover>
      </div>
    </el-col>
    <!-- TP总下注 -->
    <el-col :xs="24" :sm="12" :md="8" class="card-panel-col">
      <div class="card-panel">
        <p class="card_title">TP总下注<span class="marginL10">{{ formParams.tpBet }}%</span></p>
        <div style="text-align:right">
          <span class="colorGre" >
            ₹<span class="text-value">{{ formParams.teen_patti_today_bet_money }}</span>
          </span>
        </div>
        <p class="card_content flexDetween">
          <span>总局数: {{formParams.teen_patti_today_game_num}}</span>
          <span :class="formParams.teen_patti_today_game_income>0?'colorGre':'colorRed'">总输赢: ₹{{formParams.teen_patti_today_game_income}}</span>
          <span>总抽水: ₹{{formParams.teen_patti_today_game_tax}}</span>
        </p>
        <el-popover placement="top-end" title="TP总下注" width="300" trigger="hover">
          <img slot="reference" class="query" src="@/assets/img/query.png" alt="">
          <p>TP总下注: 今日TP游戏类型总下注数</p>
          <p>总下注%: 今日TP总下注 / 昨日TP总下注</p>
          <p>总局数: 今日TP总局数</p>
          <p>总输赢: 今日TP总输赢</p>
          <p>总抽水: 今日TP总抽水</p>
        </el-popover>
      </div>
    </el-col>
    <!-- RM总下注 -->
    <el-col :xs="24" :sm="12" :md="8" class="card-panel-col">
      <div class="card-panel">
        <p class="card_title">RM总下注<span class="marginL10">{{ formParams.rmBet }}%</span></p>
        <div style="text-align:right">
          <span class="colorGre" >
            ₹<span class="text-value">{{ formParams.rummy_today_bet_money }}</span>
          </span>
        </div>
        <p class="card_content flexAround">
          <span>总局数: {{formParams.rummy_today_game_num}}</span>
          <span :class="formParams.rummy_today_game_income>0?'colorGre':'colorRed'">总输赢: ₹{{formParams.rummy_today_game_income}}</span>
          <span>总抽水: ₹{{formParams.rummy_today_game_tax}}</span>
        </p>
        <el-popover placement="top-end" title="RM总下注" width="300" trigger="hover">
          <img slot="reference" class="query" src="@/assets/img/query.png" alt="">
          <p>RM总下注: 今日RM游戏类型总下注数</p>
          <p>总下注%: 今日RM总下注 / 昨日RM总下注</p>
          <p>总局数: 今日RM总局数</p>
          <p>总输赢: 今日RM总输赢</p>
          <p>总抽水: 今日RM总抽水</p>
        </el-popover>
      </div>
    </el-col>
    <!-- 老虎机 -->
    <el-col :xs="24" :sm="12" :md="8" class="card-panel-col">
      <div class="card-panel">
        <p class="card_title">老虎机总下注<span class="marginL10">{{ formParams.slotBet }}%</span></p>
        <div style="text-align:right">
          <span class="colorGre" >
            ₹<span class="text-value">{{ formParams.slots_today_bet_money }}</span>
          </span>
        </div>
        <p class="card_content flexAround">
          <span>总场次: {{formParams.slots_today_game_num }}</span>
          <span :class="formParams.slots_today_game_income >0?'colorGre':'colorRed'">总输赢: ₹{{formParams.slots_today_game_income }}</span>
        </p>
        <el-popover placement="top-end" title="老虎机总下注" width="300" trigger="hover">
          <img slot="reference" class="query" src="@/assets/img/query.png" alt="">
          <p>老虎机总下注: 今日老虎机游戏类型总下注数</p>
          <p>总下注%: 今日老虎机总下注 / 昨日老虎机总下注</p>
          <p>今日总局数: 今日老虎机总局数</p>
          <p>总输赢: 今日老虎机总输赢</p>
        </el-popover>
      </div>
    </el-col>
  </div>
</el-row>
</template>

<script>
import {
  getSummary,
  allPlayerActive
} from '@/api/statistics'
import {
  throttle
} from '@/utils/index'
export default {
  name: 'Person',
  components: {},
  data () {
    return {
      listQuery:{
        dateTime: [this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      },
      activeDayData:{
        monthNum: 0, //上月活跃数
        weekNum: 0, //上周活跃数
        yesterdayNum: 0, //昨日活跃
      },
      formParams:{
        today_create_person: 0, //今日注册人数
        today_first_pay_person: 0, //今日首充人数
        today_agent_create_person: 0, //今日代理新增
        all_create_person: 0, //总注册人数
        all_vip_num: 0, //总vip数量
        today_active_num: 0, //今日活跃人数
        today_pay_money: 0, //今日充值金额
        today_cash_money: 0, //今日提现金额
        today_pay_person: 0, //今日充值人数
        today_cash_person: 0, //今日提现人数
        today_game_income: 0, //今日游戏输赢
        teen_patti_today_bet_money: 0, //tp今日下注金额
        teen_patti_yesterday_bet_money: 0, //tp昨日下注金额
        teen_patti_today_game_income: 0, //tp今日输赢
        teen_patti_yesterday_game_income: 0, //tp 昨日输赢
        teen_patti_today_game_num: 0, //tp 今日游戏局数
        teen_patti_today_game_water: 0, //tp 今日流水
        teen_patti_today_game_tax: 0, //tp 今日税收
        rummy_today_bet_money: 0, //rm 今日下注金额
        rummy_today_game_income: 0, //rm 今日输赢
        rummy_today_game_num: 0, //rm 今日游戏局数
        rummy_today_game_tax: 0, //rm 今日游戏税收
        all_balance: 0, //总平台币
        can_cash_money: 0, //可提现卢比
        slots_today_bet_money: 0, //老虎机今日下注金额
        slots_today_game_income: 0, //老虎机今日游戏输赢
        slots_today_game_num: 0, //老虎机今日游戏局数
        slots_yesterday_bet_money: 0, //老虎机昨日下注金额
        slots_yesterday_game_income: 0, //老虎机昨日游戏输赢
      }
    }
  },
  created () {
    this.getSummaryList()
    this.echartDayOperation()
  },
  methods: {
    // 实时数据
    async getSummaryList (status) {
      let that = this, params = that.listQuery;
      that.summaryDataList = [];
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }
      const response = await getSummary(params)
      if (response.code == 1) {
        if(response.data){
          response.data.map(item=>{
            // 今日新增 (今日新增会员数/昨日新增会员数)
            if(item.yesterday_create_num){
              item.newProbability=that.$public.mathNumberDividePercent(item.today_create_person,item.yesterday_create_num)
            }else{
              item.newProbability='--'
            }

            // 总人数 (今日新增玩家/昨日玩家总数数)
            if(item.all_yesterday_create_num){
              item.newMember=that.$public.mathNumberDividePercent(item.today_create_person,item.all_yesterday_create_num)
            }else{
              item.newMember='--'
            }

            // 充提差额
            item.today_income=that.$public.mathNumberDivideWan(item.today_income)
            item.today_pay_money=that.$public.mathNumberDivideWan(item.today_pay_money)
            item.today_cash_money=that.$public.mathNumberDivideWan(item.today_cash_money)
            if(item.today_pay_money){
              item.income=that.$public.mathNumberDividePercent(item.today_income,item.today_pay_money)
            }else{
              item.income='--'
            }
            
            // 今日输赢
            item.all_balance=that.$public.mathNumberDivideWan(item.all_balance)
            item.can_cash_money=that.$public.mathNumberDivideWan(item.can_cash_money)
            item.today_game_income=that.$public.mathNumberDivideWan(item.today_game_income)*-1
            item.yesterday_game_income=that.$public.mathNumberDivideWan(item.yesterday_game_income)
            if(item.yesterday_game_income){
              item.newIncome=that.$public.mathNumberDividePercent(item.today_game_income,item.yesterday_game_income)
              if(item.yesterday_game_income<0){
                item.newIncome=item.newIncome*(-1)
              }
            }else{
              item.newIncome='--'
            }

            // TP总下注
            item.teen_patti_today_bet_money=that.$public.mathNumberDivideWan(item.teen_patti_today_bet_money)
            item.teen_patti_yesterday_bet_money=that.$public.mathNumberDivideWan(item.teen_patti_yesterday_bet_money)
            item.teen_patti_today_game_income=that.$public.mathNumberDivideWan(item.teen_patti_today_game_income )*-1
            item.teen_patti_today_game_tax=that.$public.mathNumberDivideWan(item.teen_patti_today_game_tax )
            if(item.teen_patti_yesterday_bet_money){
              item.tpBet=that.$public.mathNumberDividePercent(item.teen_patti_today_bet_money,item.teen_patti_yesterday_bet_money)
            }else{
              item.tpBet='--'
            }

            // RM总下注
            item.rummy_today_bet_money=that.$public.mathNumberDivideWan(item.rummy_today_bet_money)
            item.rummy_yesterday_bet_money=that.$public.mathNumberDivideWan(item.rummy_yesterday_bet_money)
            item.rummy_today_game_income=that.$public.mathNumberDivideWan(item.rummy_today_game_income )*-1
            item.rummy_today_game_tax=that.$public.mathNumberDivideWan(item.rummy_today_game_tax )
            if(item.rummy_yesterday_bet_money){
              item.rmBet=that.$public.mathNumberDividePercent(item.rummy_today_bet_money,item.rummy_yesterday_bet_money)
            }else{
              item.rmBet='--'
            }

            // 老虎机
            item.slots_today_bet_money=that.$public.mathNumberDivideWan(item.slots_today_bet_money)
            item.slots_today_game_income=that.$public.mathNumberDivideWan(item.slots_today_game_income)*-1
            item.slots_yesterday_bet_money=that.$public.mathNumberDivideWan(item.slots_yesterday_bet_money)
            item.slots_yesterday_game_income=that.$public.mathNumberDivideWan(item.slots_yesterday_game_income)
            if(item.slots_yesterday_game_income){
              item.slotBet=Math.abs(that.$public.mathNumberDividePercent(item.slots_today_bet_money,item.slots_yesterday_game_income))
            }else{
              item.slotBet='--'
            }

          })
          if(status){
            that.$message.success('数据已更新')
          }
          that.formParams = response.data[0]
        }
      }else{
        that.$message.error(response.msg)
      }
    },
    // 活跃汇总
    echartDayOperation(status){
      let that = this;
      that.activeDayData={}
      allPlayerActive().then(function(res) {
        if (res.code == 1) {
          that.activeDayData=res.data
          if(status){
            that.$message.success('数据已更新')
          }
        }
      })
    },
    // 刷新
    refresh: throttle(function () {
      this.getSummaryList('success')
      this.echartDayOperation('success')
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.colorRed{
  font-size: 20px;
  color: darkred;
}
.colorGre{
  font-size: 20px;
  color: darkgreen;
}
.panel-group {
  .card-panel-col {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    > div {
      width: 100%;
    }
    &:nth-of-type(1) .card-panel {
      background: url('../../assets/img/1.png') no-repeat;
      background-size: 100% 100%;
    }
    &:nth-of-type(2) .card-panel {
      background: url('../../assets/img/3.png') no-repeat;
      background-size: 100% 100%;
    }
    &:nth-of-type(3) .card-panel {
      background: url('../../assets/img/2.png') no-repeat;
      background-size: 100% 100%;
    }
    &:nth-of-type(4) .card-panel {
      background: url('../../assets/img/7.png') no-repeat;
      background-size: 100% 100%;
    }
    &:nth-of-type(5) .card-panel {
      background: url('../../assets/img/5.png') no-repeat;
      background-size: 100% 100%;
    }
    &:nth-of-type(6) .card-panel {
      background: url('../../assets/img/8.png') no-repeat;
      background-size: 100% 100%;
    }
    &:nth-of-type(7) .card-panel {
      background: url('../../assets/img/4.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .card-panel {
    cursor: pointer;
    overflow: hidden;
    color: #fff;
    // padding:30px;
    padding:40px 30px 30px 30px;
    font-size: 20px;
    font-weight: 550;
    text-align: left;
    position: relative;
    .card_title{
      margin-left: 20%;
      margin-top: -5px;
    }
    .card_content{
      margin-top: 32px;
      // text-align: center;
      font-size: 18px;
    }
    &:hover {
      transition: all 0.3s ease-out;
      transform: scale(1.06);
    }
    .query{
      width: 30px;
      position: absolute;
      top: 1ex;
      right: 30px;
    }
    .text-value {
      font-size: 28px;
      // border-bottom: 1px solid #fff;
    }
    .text-number{
      font-size: 15px;
      font-weight: 500;
      margin-top: 15px;
      span {
        text-align: right;
        font-size: 20px;
        // border-bottom: 1px solid #fff;
      }
    }
  }
}

@media (max-width: 550px) {
  .panel-group .card-panel-col {
    margin-bottom: 5px;
  }
  .panel-group .card-panel {
    padding:30px;
  }
}
</style>
